<template>
  <div class="detail_container">
    <div class="search">
      <van-search
        v-model="pageParam.partNo"
        shape="round"
        background="#0089ff"
        placeholder="请输入搜索关键词"
        clearable
        @focus="blurHandle()"
      />
      <div class="collect_box">
        <div
          class="collect_container"
          v-if="collectionList.length > 0 && searchFlag"
        >
          <div
            class="collect_item"
            v-for="(item, index) in collectionList"
            :key="index"
            @click="itemClick(item)"
          >
            <div>{{ item.partNo }}</div>
            <div>{{ item.brandName }}</div>
          </div>
        </div>
      </div>
      <div
        class="mask"
        v-if="collectionList.length > 0 && searchFlag"
        @click="searchFlag = false"
      ></div>
    </div>
    <div class="detail_box">
      <div class="item">
        <div class="label">型号：</div>
        <div class="content">{{ modelInfo.partNo }}</div>
      </div>
      <div class="item">
        <div class="label">品牌：</div>
        <div class="content">{{ modelInfo.brandName }}</div>
      </div>
      <div class="item">
        <div class="label">产品编码：</div>
        <div class="content">{{ modelInfo.productNo }}</div>
      </div>
      <div class="item">
        <div class="label">产品状态：</div>
        <div class="content">{{ modelInfo.productStatusFor }}</div>
      </div>
      <div class="item">
        <div class="label">产品描述：</div>
        <div class="content">{{ modelInfo.describe }}</div>
      </div>
      <div class="item">
        <div class="label">封装：</div>
        <div class="content">{{ modelInfo.package }}</div>
      </div>
      <div class="item">
        <div class="label">参考价格：</div>
        <div class="special_content">
          <div style="color: red; text-align: right">{{ modelInfo.price }}</div>
          <div class="section_box" v-if="modelInfo.priceRange.length > 0">
            <div
              class="price_item"
              v-for="(item, index) in modelInfo.priceRange"
            >
              <div>{{ item.qty }}</div>
              <div style="margin: 0 20px">--</div>
              <div style="color: orange">￥{{ item.price }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="item">
        <div class="label">库存数量：</div>
        <div class="content" style="color: green">{{ modelInfo.stockQty }}</div>
      </div>
      <div class="item">
        <div class="label">待发货数量：</div>
        <div class="content" style="color: orange">
          {{ modelInfo.unDeliveryQuantity }}
        </div>
      </div>
      <div class="item">
        <div class="label">备注：</div>
        <div class="content">{{ modelInfo.remark }}</div>
      </div>
      <div class="specific_item">
        <div class="label">规格参数：</div>
        <div class="special_content">
          <div class="section_box" v-if="modelInfo.specifications.length > 0">
            <div
              class="price_item"
              v-for="(item, index) in modelInfo.specifications"
              style="font-size: 0.4rem"
            >
              <div>{{ item.key }}</div>
              <div style="margin-left: 20px; color: orange">
                {{ item.value }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script name="model_detail" setup>
import { GetModelList, GetModelInfo } from "@/api/model";
import { onMounted, ref, watch } from "vue";
import { throttle } from "lodash";

const collectionList = ref([]);
const searchFlag = ref(false);
const pageParam = ref({
  partNo: "",
  pageIndex: 1,
  pageSize: 10,
});
watch(
  () => pageParam.value.partNo,
  (newValue, oldValue) => {
    if (!newValue) {
      setTimeout(() => {
        collectionList.value = [];
      }, 300);
      return;
    }
    if(!clickFlag.value){
      setTimeout(() => {
        collectionList.value = [];
      }, 300);
      return;
    }
    pageParam.value.pageIndex = 1;
    collectionList.value = [];
    getList();
  }
);

const blurHandle = () => {
  clickFlag.value = true
}

const clickFlag = ref(true)
//点击集合项
const itemClick = (item) => {
  currentId.value = item.id;
  localStorage.setItem("partNoId",currentId.value)
  pageParam.value.partNo = item.partNo;
  collectionList.value = [];
  clickFlag.value = false
  getInfo();
};

//获取列表
const getList = throttle(async () => {
  if (!pageParam.value.partNo) {
    return;
  }
  const res = await GetModelList(pageParam.value);
  collectionList.value = res.data.result
  if (collectionList.value.length > 0) {
    searchFlag.value = true;
  } else {
    searchFlag.value = false;
  }
}, 500);

const currentId = ref(0);
const modelInfo = ref({
  priceRange: [],
  specifications: [],
});
onMounted(() => {
  currentId.value = localStorage.getItem("partNoId")
  getInfo();
});
const getInfo = async () => {
  const res = await GetModelInfo({ id: currentId.value });
  modelInfo.value = res.data;
  modelInfo.value.price = res.data.price ? "￥" + res.data.price : "";
  modelInfo.value.costPrice = res.data.costPrice
    ? "￥" + res.data.costPrice
    : "";
  modelInfo.value.priceRange = res.data.priceRange ? JSON.parse(res.data.priceRange) : [];
};
</script>
<style>
@import "../../assets/styles/index.scss";
</style>
<style lang="scss" scoped>
.detail_container {
  width: 100%;
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 30px;
  box-sizing: border-box;
  overflow-y: scroll;
  position: relative;
  .search {
    .collect_box {
      width: 100%;
      position: relative;
      z-index: 99;
      .collect_container {
        width: 100%;
        max-height: 200px;
        box-shadow: 0 1px 3px #000;
        animation: fadeIn 0.5s ease;
        overflow: scroll;
        position: absolute;
        top: 0;
        left: 0;
        background-color: #fff;
        .collect_item {
          width: 100%;
          padding: 0.1rem 0.3rem;
          box-sizing: border-box;
          border-bottom: 1px solid #0089ff;
          font-size: 0.4rem;
          display: flex;
          justify-content: space-between;
          align-items: center;
          cursor: pointer;
          &:hover {
            background-color: #eee;
          }
        }
      }
      @keyframes fadeIn {
        from {
          height: 0;
        }
        to {
          height: 200px;
        }
      }
    }
    .mask {
      width: 100%;
      height: 100%;
      background-color: #000;
      position: absolute;
      opacity: 0.1;
    }
  }
  .detail_box {
    width: 90%;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 5px;
    background-color: #fff;
    margin: 0 auto;
    margin-top: 20px;
    .item {
      display: flex;
      justify-content: space-between;
      border-bottom: 1px solid #ddd;
      padding: 10px;
      box-sizing: border-box;
      font-size: 0.4rem;
      .label {
        font-weight: bold;
        width: 100px;
        display: flex;
      }
      .content {
        flex: 1;
        justify-content: flex-end;
        display: flex;
        align-items: center;
      }
      .special_content {
        .section_box {
          font-size: 0.3rem;
          .item_tab {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          .price_item {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }
    .specific_item {
      border-bottom: 1px solid #ddd;
      padding: 10px;
      box-sizing: border-box;
      font-size: 0.4rem;
      .label {
        font-weight: bold;
        width: 100px;
        display: flex;
      }
      .special_content {
        margin-top: 10px;
        .section_box {
          font-size: 0.3rem;
          .item_tab {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
          .price_item {
            display: flex;
            justify-content: space-between;
            align-items: center;
          }
        }
      }
    }
  }
  .back_container {
    width: 90%;
    height: 40px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #0089ff;
    border-radius: 6px;
    font-size: 0.4rem;
    color: #fff;
    margin-top: 20px;
    cursor: pointer;
  }
}
</style>
